.hv-color-picker-list {
    display      : flex;
    flex-wrap    : wrap;
    margin-bottom: -8px;
    margin-left: -4px;
    margin-right: -4px;

    .hv-color-picker-item {
        margin-top   : 2px;
        margin-left  : 4px;
        margin-right : 4px;
        text-align   : center;
        margin-bottom: 8px;
        position     : relative;


        &:last-child {
            margin-right: 0;
        }


        &-del {
            transition: 0.35s;
            position  : absolute;
            top       : -8px;
            right     : -5px;
            cursor    : pointer;
            color     : var(--error-color);
            display   : none;

            :deep(.del-icon) {
                position: absolute;
                top     : 4px;
                right   : 0px;
                z-index: 2;
            }

            &-bg {
                position        : absolute;
                width           : 12px;
                height          : 12px;
                top             : 4px;
                right           : 0px;
                background-color: var(--hv-black);
                border-radius   : 50%;

            }
        }

        &-del-small {
            font-size: 12px;
        }

        &-del-default {
            font-size: 16px;
        }

        &-del-large {
            font-size: 16px;
        }

        &-add {
            border-radius: var(--hv-border-radius-base);
            cursor       : pointer;
            border-width : var(--hv-border-width-base);
            border-style : var(--hv-border-style-base);
            text-align   : center;
        }

        &-add-small {
            width      : 22px;
            height     : 22px;
            line-height: 18px;

            :deep(.icon) {
                font-size: 12px;
            }
        }


        &-add-default {
            width      : 32px;
            height     : 32px;
            line-height: 30px;

            :deep(.icon) {
                font-size: 14px;
            }
        }

        &-add-large {
            width      : 40px;
            height     : 40px;
            line-height: 38px;

            :deep(.icon) {
                font-size: 16px;
            }
        }


        &:hover {
            .hv-color-picker-item-del {
                display: block;
            }
        }
    }

}